<template>
	<u-popup :show="isShowFw" round="20" @close="clean">
		<view class="content-p">
			<view class="clear-icon" @close="clean">
				<image src="__ROOT__/common/images/clear.png" mode=""></image>
			</view>

			<view class="title-p">
				标题
			</view>

			<view class="list mt20">
				<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '10px'}" activeColor="#0f956e" v-for="(item, index) in list" :key="index"
						:label="item" :name="item">
					</u-checkbox>
				</u-checkbox-group>
			</view>

			<view class="plr24 mt20">
				<view class="btn-w" @click="onSure">
					确认
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'

	const isShowFw = ref(false)
	const props = defineProps({
		isShow: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['close', 'confirm'])
	watch(() => props.isShow, (newVal) => {
		isShowFw.value = newVal
	})
	const clean = () => {
		emit('close', false)
	}

	const checkboxValue1 = ref([])
	const checkboxChange = (e) => {
		console.log(e)
	}
	const onSure = () => {
		emit('confirm', checkboxValue1.value)
	}
	
</script>

<style lang="scss" scoped>
	.content-p {
		padding: 38rpx 24rpx 0;
		position: relative;

		.clear-icon {
			padding: 24rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 200;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.list {
		max-height: 600rpx;
		overflow-y: scroll;
	}
</style>